<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ID } from '#/api/common';
import type { Consumer } from '#/api/iot/relay/consumerGroup/model';

import { useRoute } from 'vue-router';

import { Popconfirm } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  subscribeList,
  unsubscription,
} from '#/api/iot/relay/consumerGroup/index';

import { columns } from './data';

const route = useRoute();
const consumerId = route.params.id;
const gridOptions: VxeGridProps = {
  columns,
  height: '500',
  toolbarConfig: {
    enabled: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async (_) => {
        const resp = await subscribeList(consumerId as ID);
        console.log(resp);

        return { rows: resp };
      },
    },
  },
  /**
   * 虚拟滚动  默认关闭
   */
  scrollY: {
    enabled: false,
    gt: 0,
  },
  id: 'topic-list-index',
};

const [BasicTable, tableApi] = useVbenVxeGrid({
  gridOptions,
});

const handleRelieve = async (row: Consumer) => {
  await unsubscription(consumerId as ID, row.id);
  tableApi.query();
};
</script>

<template>
  <BasicTable>
    <template #action="{ row }">
      <Popconfirm
        placement="left"
        title="确认解除？"
        @confirm="handleRelieve(row)"
      >
        <ghost-button danger @click.stop="">
          {{ $t('pages.common.unsubscribe') }}
        </ghost-button>
      </Popconfirm>
    </template>
  </BasicTable>
</template>

<style lang="scss" scoped></style>
